<#import '/ftlLibrary/properteisVariable.ftl' as pv/>
<link href="assets/css/bootstrap-select.css" rel="stylesheet"/>
<link href="assets/css/front/listCommonStyle.css" rel="stylesheet"/>
<link href="assets/css/modify.css" rel="stylesheet"/>
<script src="assets/js/select2/select2.js"></script>
<script src="${ctx}/assets/js/highcharts/highcharts.js"></script>
<script src="${ctx}/assets/js/highcharts/exporting.js"></script>
<script src="${ctx}/assets/js/highcharts/data.js"></script>
<script src="${ctx}/assets/js/highcharts/highcharts-zh_CN.js"></script>
<style>
    .iconchange1 .fa{
        color: #2a6496;
        font-size: 12px!important;
    }

    .s1{
        position  :absolute;
        top   :-20px;
        *top   :-22px;
        left   :20px;
        display  :block;
        height  :10px;
        width  :10px;
        font-size : 0;
        line-height : 0;
        border-color :transparent transparent #666 transparent;
        border-style :dashed dashed solid dashed;
        border-width :10px;
    }
    .i1{
        position  :absolute;
        top   :-9px;
        *top   :-9px;
        left   :-10px;
        display  :block;
        height  :10px;
        width  :10px;
        font-size : 0;
        line-height : 0;
        border-color :transparent transparent #fff transparent;
        border-style :dashed dashed solid dashed;
        border-width :10px;
    }


    .popover {
        position: absolute;
        top: 38px;
        left: 110px;
        z-index: 1000;
        display: none;
        max-width: 276px;
        padding: 1px;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: left;
        text-align: start;
        text-decoration: none;
        text-shadow: none;
        text-transform: none;
        letter-spacing: normal;
        word-break: normal;
        word-spacing: normal;
        word-wrap: normal;
        white-space: normal;
        background-color: #fff;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border: 1px solid #ccc;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: 6px;
        -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
        line-break: auto;
    }
    .popover-content a{
        text-wrap:normal!important;
    }
    .appendTdA{
        float: left;
        cursor: pointer;
        padding-bottom: 5px;
    }
    #datatable {
        border: 1px solid #ccc;
        border-collapse: collapse;
        border-spacing: 0;
        font-size: 12px;
    }
    td,th {
        border: 1px solid #ccc;
        padding: 4px 20px;
    }
</style>
<div class="row margin-left-10">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="widget flat margin-top-0" style="margin: -10px 0 0px 0!important;">
            <div class="widget-header bordered-sky theme-bordered nopadding">
                <div class="widget-buttons widget-label nomargin-bottom">
                    <label class="businessBtns">
                        <ol class="breadcrumb" style="margin: 0;">
                            <li style="color: #809fa6;">统计报表</li>
                            <li class="active" style="color: #23a8f5;">新增会员统计</li>
                        </ol>
                    </label>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 margin-bottom-10 nopadding-right">
        <div class="widget flat margin-top-0 searchCriteria" style="margin: 3px 0 0px 0!important;">
            <div class="widget-header bordered-sky theme-bordered nopadding">
                <div class="widget-buttons widget-label nomargin-bottom">
                    <label>
                        <label class="businessBtns">
                            <a type="btn" class="btn parentChildBtn"
                               style="border: none;border-top-left-radius: 4px!important;border-bottom-left-radius: 4px!important;width: 140px;color: #4a647d;margin-right: 0!important;box-shadow:0px 0px 10px rgba(122,161,184,0.3);">
                                亲子会员课时统计
                            </a><a type="btn" class="btn interimBtn"
                                   style="border: none;border-top-right-radius: 4px!important;border-bottom-right-radius: 4px!important;width: 140px;color: #4a647d;box-shadow:0px 0px 10px rgba(122,161,184,0.3);">
                            过渡会员课时统计
                        </a>
                            <input type="hidden" value="" name="memberType"/>
                        </label>
                    </label>
                    <label class="pull-right businessBtns">
                        <label class="margin-right-20">
                            <a style="border-radius: 0px;border: none;background: #23a8f5 !important;"
                               class="btn btn-blue shiny download" onclick="exportData('${searchFormId}','MemberInformation.xlsx')"><i class="fa fa-share"></i>导出
                            </a>
                        </label>
                        <label class="margin-right-20">
                            <a style="border-radius: 0px;border: none;background: #ffab00 !important;"
                               class="btn btn-warning shiny search "><i class="fa fa-search"></i>搜索
                            </a>
                        </label>
                        <!--<label onclick="iconsChange()" style="margin-right: 6px">-->
                        <!--<label>-->
                        <!--<a class="iconsChangeA" style="width: 13px;height: 13px;cursor: pointer;background: url('assets/img/nav-img/icon_hidden.png');display: block;-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;user-select:none;" value="1"></a>-->
                        <!--</label>-->
                        <!--<label style="color: #23a8f5 ;vertical-align: middle;padding-top:4px;">-->
                        <!--<span class="iconsChangeSpan" style="-webkit-user-select:none; cursor: pointer;-moz-user-select:none; -ms-user-select:none;user-select:none;">隐藏搜索栏</span>-->
                        <!--</label>-->
                        <!--</label>-->
                    </label>
                    <div class="search_Bar" style="vertical-align: middle;margin-top: 18px;clear: both">
                        <form id="${searchFormId}" action="${actionUrl}" method="POST" class="searchConditions">
                            <div class="row searchInput" style="margin: 0;">
                                <label class="iconchange1 hidden" style="position: absolute;right: 10px;top: 0px;" >
                                    <a class="search_Bar_A" style="color: #2a6496;cursor: pointer;" onclick="iconchangeShow(this)" value="1">筛选更多<i class="fa fa-chevron-down" style="padding-left: 5px"></i></a>
                                </label>
                                <label style="margin-bottom: 15px;margin-right: 40px;" class="search_Bar_item hidden">
                                    <label style="width: 78px">日期范围：</label>
                                    <label>
                                        <input id="d4311" type="text" name="createDate_begin" class="beginValue Wdate" value="${search_map.createDate_begin[0]}" placeholder="上课日期"
                                               onFocus="WdatePicker({doubleCalendar:true,maxDate:'#F{$dp.$D(\'d4312\')}',dateFmt:'yyyy-MM-dd'})" style="width: 90px;height: 30px!important;padding-left:3px!important;border: 1px solid #c6d5d8;border-radius: 4px !important;"> 至
                                        <input id="d4312"  type="text" name="createDate_end" class="endValue Wdate"  value="${search_map.createDate_end[0]}" placeholder="上课日期"
                                               onFocus="WdatePicker({doubleCalendar:true,minDate:'#F{$dp.$D(\'d4311\')}',dateFmt:'yyyy-MM-dd'})" style="width: 90px;height: 30px!important;padding-left:3px!important;border: 1px solid #c6d5d8;border-radius: 4px !important;">
                                    </label>
                                </label>
                            </div>
                        </form>
                    </div>
                    <form>
                        <input type="hidden" id="type" name="type" value="${type}">
                        <input type="hidden" id="date" name="date" value="${date}">
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 映射列表 -->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-top: 30px;padding-bottom: 20px">
        <div class="widget flat radius-bordered" style="position: relative">
            <div class="row" style="text-align: center;position: absolute;left: 500px;top: 5px;z-index: 1000">
                <a type="btn" class="btn dayBtn"
                   style="border: 1px solid #5db2ff;border-top-left-radius: 4px!important;border-bottom-left-radius: 4px!important;width: 40px;color: #4a647d;margin-right: 0!important;box-shadow:0px 0px 10px rgba(122,161,184,0.3);">
                    日
                </a><a type="btn" class="btn monthBtn"
                       style="background-color: #23a8f5;border: 1px solid #5db2ff;border-top-right-radius: 4px!important;border-bottom-right-radius: 4px!important;width: 40px;color: #fff;box-shadow:0px 0px 10px rgba(122,161,184,0.3);">
                月
            </a>
            </div>
            <div class="widget-body no-padding">
                <div id="container1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
                <p style="line-height: 50px;margin-bottom: 0px!important;background-color: #f2f4f6;">数据表格</p>
                <div class="table-scrollable" style="border: none;" id="tableScrollable">
                    <table class="table table-hover  dataTable newtable" id="datatable1">
                        <thead>
                        <tr>
                            <th class="col-xs-4">日期</th>
                            <th class="col-xs-4">新报会员</th>
                            <th class="col-xs-4">续报会员</th>
                        </tr>
                        </thead>
                        <tbody>
                        <#if viewAddedMembers?size==0>
                            <tr>
                                <th align="center">无数据</th>
                                <td align="center">无数据</td>
                                <td align="center">无数据</td>
                            </tr>
                        </#if>
                        <#list viewAddedMembers as data>
                            <tr>
                                <th>${data.createDate}</th>
                                <td>${data.added}</td>
                                <td>${data.renewal}</td>
                            </tr>
                        </#list>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!--<div class="row">-->
<!--&lt;!&ndash; 映射列表 &ndash;&gt;-->
<!--<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="leftTree">-->
<!--<div class="widget flat radius-bordered">-->
<!--<div class="widget-header bg-sky theme">-->
<!--<span class="widget-caption">新增亲子统计</span>-->
<!--</div>-->
<!--<div class="widget flat searchCriteria">-->
<!--<div class="widget-header bordered-bottom bordered-sky theme-bordered">-->
<!--<span class="widget-caption">筛选区</span>-->
<!--<div class="widget-buttons">-->
<!--&lt;!&ndash; 业务按钮 begin &ndash;&gt;-->
<!--<label class="businessBtns">-->
<!--<button class="btn btn-info shiny search"><i class="fa fa-search"></i>搜索</button>-->
<!--<button class="btn btn-success shiny add" serializeNum="${serializeNum}" editUrl="${editUrl}"><i class="fa fa-plus"></i>新增</button>-->
<!--<button class="btn btn-magenta shiny update" serializeNum="${serializeNum}" editUrl="${editUrl}"><i class="fa fa-pencil"></i>修改</button>-->
<!--<button class="btn btn-danger shiny batchDelete" serializeNum="${serializeNum}" batchDeleteUrl="${batchDeleteUrl}"><i class="fa fa-pencil"></i>删除</button>-->
<!--<button class="btn btn-palegreen shiny download"><i class="fa fa-download"></i>导出</button>-->
<!--</label>-->
<!--<form>-->
<!--<input type="hidden" id="type" name="type" value="${type}">-->
<!--<input type="hidden" id="date" name="date" value="${date}">-->
<!--</form>-->
<!--&lt;!&ndash; 业务按钮 end &ndash;&gt;-->
<!--&lt;!&ndash; 面板控制按钮 begin &ndash;&gt;-->
<!--<a href="#" data-toggle="collapse"><i class="fa red fa-minus"></i></a>-->
<!--<a href="#" data-toggle="config"><i class="fa red fa-cog"></i></a>-->
<!--&lt;!&ndash; 面板控制按钮 end &ndash;&gt;-->
<!--</div>&lt;!&ndash;Widget Buttons&ndash;&gt;-->
<!--</div>&lt;!&ndash;Widget Header&ndash;&gt;-->
<!--<div class="widget-body" style="display: block;">-->
<!--<div class="search_Bar">-->
<!--<form id="${searchFormId}" action="${actionUrl}" method="POST">-->
<!--<table class="searchAreaTable">-->
<!--<tbody>-->
<!--<tr>-->
<!--&lt;!&ndash; 条件属性,所有条件放在一行,系统自动计算每一行展示的条件属性个数 &ndash;&gt;-->
<!--<th><label>日期范围</label></th>-->
<!--<td>-->
<!--<div class="beginValueDiv">-->
<!--<input id="d4311" type="text" name="createDate_begin" class="beginValue Wdate" value="${search_map.createDate_begin[0]}"-->
<!--onFocus="WdatePicker({doubleCalendar:true,maxDate:'#F{$dp.$D(\'d4312\')}',dateFmt:'yyyy-MM-dd HH:mm:ss'})" placeholder="上课日期" >-->
<!--</div>-->
<!--<div class="endValueDiv">-->
<!--<input id="d4312"  type="text" name="createDate_end" class="endValue Wdate"  value="${search_map.createDate_end[0]}"-->
<!--onFocus="WdatePicker({doubleCalendar:true,minDate:'#F{$dp.$D(\'d4311\')}',dateFmt:'yyyy-MM-dd HH:mm:ss'})" placeholder="上课日期" >-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--</tbody>-->
<!--</table>-->
<!--</form>-->
<!--</div>-->
<!--</div>&lt;!&ndash;Widget Body&ndash;&gt;-->
<!--</div>&lt;!&ndash;Widget&ndash;&gt;-->
<!--<div class="row" style="text-align: center;padding-top: 1px">-->
<!--<div class="col-xs-6 col-xs-offset-3">-->
<!--<div class="col-xs-6 nopadding">-->
<!--<button type="btn" class="btn col-xs-12 dayBtn" style="border-color: #5db2ff!important;">日</button>-->
<!--</div>-->
<!--<div class="col-xs-6 nopadding">-->
<!--<button type="btn" class="btn col-xs-12 monthBtn" style="border-color: #5db2ff!important;background-color: #5db2ff">月</button>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="widget-body no-padding">-->
<!--<div id="container1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>-->
<!--<p>数据表格</p>-->
<!--<table id="datatable1">-->
<!--<thead>-->
<!--<tr>-->
<!--<th>日期</th>-->
<!--<th>新报会员</th>-->
<!--<th>续报会员</th>-->
<!--</tr>-->
<!--</thead>-->
<!--<tbody>-->
<!--<#if viewAddedMembers?size==0>-->
<!--<tr>-->
<!--<th align="center">无数据</th>-->
<!--<td align="center">无数据</td>-->
<!--<td align="center">无数据</td>-->
<!--</tr>-->
<!--</#if>-->
<!--<#list viewAddedMembers as data>-->
<!--<tr>-->
<!--<th>${data.createDate}</th>-->
<!--<td>${data.added}</td>-->
<!--<td>${data.renewal}</td>-->
<!--</tr>-->
<!--</#list>-->
<!--</tbody>-->

<!--</table>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->

<script>
    $(".parentChildBtn").click(function () {
        $('.parentChildBtn').css("background","#23a8f5");
        $('.interimBtn').css("background","#fff");
        $("#type").val("1");
        var type = $("#type").val();
        var date = $("#date").val();

        if(date == 1){
            javascript:toView('ViewConsultancyStatisticsController/dayAddedMember.do?type=1',true,'GET',{pageSize:10})
        }
        if(date == 2){
            javascript:toView('ViewConsultancyStatisticsController/monthAddedMember.do?type=1',true,'GET',{pageSize:10})
        }
    })
    $(".interimBtn").click(function () {
        $('.parentChildBtn').css("background","#fff");
        $('.interimBtn').css("background","#23a8f5");
        $("#type").val("2");
        var type = $("#type").val();
        var date = $("#date").val();

        if(date == 1){
            javascript:toView('ViewConsultancyStatisticsController/dayAddedMember.do?type=2',true,'GET',{pageSize:10})
        }
        if(date == 2){
            javascript:toView('ViewConsultancyStatisticsController/monthAddedMember.do?type=2',true,'GET',{pageSize:10})
        }
    })
    $(".dayBtn").click(function () {
        $('.dayBtn').css("background","#23a8f5");
        $('.monthBtn').css("background","#fff");
        $("#date").val("1");
        var type = $("#type").val();
        var date = $("#date").val();
        var path = "";
        if(type == 1){
            javascript:toView('ViewConsultancyStatisticsController/dayAddedMember.do?type=1',true,'GET',{pageSize:10})
        }
        if(type == 2){
            javascript:toView('ViewConsultancyStatisticsController/dayAddedMember.do?type=2',true,'GET',{pageSize:10})
        }

    })
    $(".monthBtn").click(function () {
        $('.dayBtn').css("background","#fff");
        $('.monthBtn').css("background","#23a8f5");
        $("#date").val("2");
        var type = $("#type").val();
        var date = $("#date").val();
        if(type == 1){
            javascript:toView('ViewConsultancyStatisticsController/monthAddedMember.do?type=1',true,'GET',{pageSize:10})
        }
        if(type == 2){
            javascript:toView('ViewConsultancyStatisticsController/monthAddedMember.do?type=2',true,'GET',{pageSize:10})
        }
    })
    $(".selectpicker1").select2();

    $(function () {
        $('#container1').highcharts({
            data: {
                table: 'datatable1'
            },
            chart: {
                type: 'column'
            },
            title: {
                text: '新增会员统计'
            },
            yAxis: {
                allowDecimals: false,
                title: {
                    text: '(人数)',
                    rotation: 0,
                    y:-165,
                    x:-10
                }
            }/*,
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        this.point.y + '人' + this.point.name.toLowerCase();
                }
            }*/
        });
        $(".highcharts-button").remove();
        $(".highcharts-credits").remove();
    });
    $(function () {
        var type = $("#type").val();
        if(type == 1){
            $('.parentChildBtn').css({
                "background":"#23a8f5",
                "color":"#fff"
            });
            $('.interimBtn').css({
                "background":"#fff",
                "color":"#4a647d"
            });
        }
        if(type == 2){
            $('.parentChildBtn').css({
                "background":"#fff",
                "color":"#4a647d"
            });
            $('.interimBtn').css({
                "background":"#23a8f5",
                "color":"#fff"
            });
        }
        if(date == 1){
            $('.dayBtn').css({
                "background":"#23a8f5",
                "color":"#fff"
            });
            $('.monthBtn').css({
                "background":"#fff",
                "color":"#4a647d"
            });
        }
        if(date == 2){
            $('.dayBtn').css({
                "background":"#fff",
                "color":"#4a647d"
            });
            $('.monthBtn').css({
                "background":"#23a8f5",
                "color":"#fff"
            });
        }
    })

    //    隐藏显示搜索
    function iconsChange() {
        if($(".iconsChangeA").val()==1){
            $(".iconsChangeA").val("0");
            $(".iconsChangeA").css("background","url('assets/img/nav-img/icon_hidden.png')");
            $(".iconsChangeSpan").html("隐藏搜索栏");
            $(".search_Bar").removeClass("hidden");
        }else{
            $(".iconsChangeA").val("1");
            $(".iconsChangeA").css("background","url('assets/img/nav-img/icon_show.png')");
            $(".iconsChangeSpan").html("显示搜索栏");
            $(".search_Bar").addClass("hidden");
        }
    }

    //    筛选下拉框
    setTimeout(function () {
        var size = $(".search_Bar_item").size();
        if (size > 8) {
            $(".iconchange1").removeClass("hidden");
            $(".search_Bar_item").each(function () {
                var index = $(this).index();
                if (index <= 8) {
                    $(this).removeClass("hidden")
                }

            })
        } else {
            $(".iconchange1").addClass("hidden");
            $(".search_Bar_item").each(function () {
                $(this).removeClass("hidden")
            })
        }

    }, 10)

    function iconchangeShow(that) {

        if($(that).attr("value")==1){
            $(that).attr("value","0");
            $(".iconchange1 .fa").removeClass("fa-chevron-down").addClass("fa-chevron-up");
            $(".search_Bar_item").each(function () {
                $(this).removeClass("hidden")
            })
        }else{
            $(that).attr("value","1");
            $(".iconchange1 .fa").removeClass("fa-chevron-up").addClass("fa-chevron-down");
            $(".search_Bar_item").each(function () {
                var index = $(this).index();
                if (index <= 8) {
                    $(this).removeClass("hidden")
                }else{
                    $(this).addClass("hidden")
                }

            })
        }

    }
</script>